import React, { memo, useEffect, useCallback } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';

import { getHotRecommendsAction } from "../../store/actionCreators";

import ThemeHeaderRCMD from '@/components/theme-header-rcmd';
import SongsCover from "@/components/songs-cover";
import { HotRecommendWrapper } from "./style";

const HotRecommend = memo(() => {
  const dispatch = useDispatch();
  const { hotRecommends = [] } = useSelector(state => ({
    hotRecommends: state.getIn(["recommend", "hotRecommends"])
  }), shallowEqual);
  const navigate = useNavigate();

  useEffect(() => {
    dispatch(getHotRecommendsAction())
  }, [dispatch]);

  const keywordClick = useCallback((keyword) => {
    navigate(`/discover/songs`, { state: { keyword }});
  }, [navigate]);

  return (
    <HotRecommendWrapper>
      <ThemeHeaderRCMD 
        title="热门推荐" 
        keywords={["夜晚", "散步", "思念", "酒吧", "怀旧", "孤独"]}
        moreLink="/discover/songs"
        keywordClick={keywordClick}
      />
      
      <div className="rcmd_list">
        {
          hotRecommends.map(item => {
            return <SongsCover 
                    key={item.id} 
                    item={item} 
                    right="43px" 
                  />
          })
        }
      </div>
    </HotRecommendWrapper>
  )
})

export default HotRecommend